<script setup>
import { computed, reactive, ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const orderList = ref([]);
const showList = ref([]);
// 子组件接收cartItem
const data = defineProps(["cartItem"]);
let itemData = reactive(data.cartItem);
// data.cartItem就是orderList
for (const key in itemData.orderList) {
  if (Object.prototype.hasOwnProperty.call(itemData.orderList, key)) {
    const element = itemData.orderList[key];
    orderList.value.push(element);
  }
}
if (orderList.value.length < 2) {
  showList.value = orderList.value;
} else {
  showList.value = [orderList.value[0], orderList.value[1]];
}
let total = computed(() => {
  return orderList.value.reduce((total, item) => {
    return (total += item.count);
  }, 0);
});
let amount = computed(() => {
  return orderList.value.reduce((total, item) => {
    return (total += item.count * item.price);
  }, 0);
});
// 携带shopId跳转到ConfirmOrder
const jumptoOrder = () => {
  router.push({ name: "ConfirmOrder", params: { shopId: itemData.shopId } });
  console.log('1111',itemData.orderList);
};
</script>
<template>
  <div class="shop-card" v-if="amount>0">
    <p>{{ itemData.shopName }}</p>
    <ul>
      <li v-for="item in showList" :key="item.id" class="goods-list">
        <img :src="item.img_url" alt="" />
        <div class="info">
          <p>{{ item.name }}</p>
          <span> ¥{{ item.price }} × {{ item.count }}</span>
        </div>
        <div class="total">¥{{ item.price * item.count }}</div>
      </li>
    </ul>
    <div class="foot">
      <p>共计 {{ total }} 件 / {{ amount }} 元</p>
      <button @click="jumptoOrder">去结算</button>
    </div>
  </div>
</template>
<style scoped lang="scss">
.shop-card {
  width: 92%;
  margin: 10px auto;
  padding: 16px 20px;
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 0 0 3px #82828231;
  & > p {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
  }
  .goods-list {
    display: flex;
    justify-content: space-between;
    margin-bottom: 14px;
    img {
      width: 38px;
      height: 38px;
    }
    .info {
      padding-left: 16px;
      text-align: left;
      flex-grow: 1;
      p {
        font-weight: 600;
      }
      span {
        color: rgb(254, 57, 57);
      }
    }
    .total {
      height: 38px;
      padding-top: 23px;
    }
  }
  .foot {
    display: flex;
    justify-content: space-between;
    border: 1px solid #7543e0;
    p {
      flex-grow: 1;
      text-align: center;
      height: 28px;
      line-height: 28px;
      color: #7543e0;
      font-size: 16px;
    }
    button {
      background-color: #7543e0;
      border: none;
      color: #fff;
      width: 84px;
      height: 30px;
    }
  }
}
</style>
